<template>
<div>
  vueX axios {{ name}} {{test}} {{sets}} {{a}}
  <a-button @click="testData">++</a-button>
  <Table :columns="columns" :listData="listData" :name="name" :loading="loading">
    <template v-slot:default="sol">{{ sol.obj.a }}</template>
  </Table>
</div>
</template>

<script>
import {
  article
} from "@/api/article.js";
import {
  reactive,
  toRefs
} from "vue";
import Table from "./Table.vue";
const columns = [{
    title: "文章名称",
    key: "class",
    dataIndex: "class",
    align: "center",
  },
  {
    title: "作者",
    key: "cid",
    dataIndex: "cid",
    align: "center",
  },
  {
    title: "访问量",
    key: "visits",
    dataIndex: "visits",
    align: "center",
  },
];
export default {
  components: {
    Table,
  },
  data() {
    return {
      test: 12,
    };
  },
  computed: {
    sets() {
      console.log(this);
      return this.test * 2;
    },
  },
  methods: {
    testData() {
      this.test = 300;
      this.a = 800;
      this.$http();

      return "huo";
    },
  },

  setup() {
    let obj = reactive({
      listData: [],
      columns,
      loading: false,
      a: 30,
      name: 20,
      async getData() {
        this.loading = true;
        const data = await article();
        this.loading = false;
        this.listData = data;
      },
    });
    // console.log(ctx);
    obj.getData();
    return {
      ...toRefs(obj),
    };
  },
};
</script>
